<script lang="ts" setup>
import { provide, ref } from 'vue';

interface Props {
	defaultActiveKey?: string | number;
	direction?: string;
	items?: any;
}

const props = withDefaults(defineProps<Props>(), {
	direction: 'horizontal',
	defaultActiveKey: '0'
});
const emit = defineEmits(['change']);
const activeKey = ref(props.defaultActiveKey);
const tabs = ref(props.items);

const handleSelect = (key: string) => {
	activeKey.value = key;
	emit('change', key);
};

provide('tabs', tabs);
</script>

<template>
	<view class="x-tabs">
		<view :class="{ 'x-tabs-header': true, 'x-tabs-vertical': direction === 'vertical' }">
			<template v-for="item in tabs">
				<view :class="{ item: true, active: activeKey === item.key }" @tap="handleSelect(item.key)">
					{{ item.title }}
				</view>
			</template>
		</view>
		<slot></slot>
	</view>
</template>

<style lang="scss" scoped>
.x-tabs {
	background-color: #fff;

	&-header {
		display: flex;
		justify-content: space-between;
		white-space: nowrap;
		overflow-x: auto;
		gap: 32rpx;

		&::-webkit-scrollbar {
			display: none;
		}

		.item {
			position: relative;
			height: 80rpx;
			line-height: 80rpx;
			display: flex;
			font-size: 28rpx;
			line-height: 80rpx;
			color: #3e3e3e;
			padding: 0 24rpx;
			box-sizing: border-box;
		}

		.active {
			color: #0023ad;
			font-size: 28rpx;
			font-weight: bold;

			&::after {
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translate(-50%);
				content: '';
				width: 48rpx;
				height: 4rpx;
				background-color: #0023ad;
				border-radius: 10rpx;
			}
		}
	}

	&-vertical {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}
}
</style>
